<template>
    <view class="fixed-top">
        <view class="gw-search-input">
            <text class="icon-search icon-btn" :style="{'left': isFocus ? '48rpx' : '286rpx'}"/>
            <input class="uni-input"
                   :class="[isFocus ? 'is-focus' : '']"
                   @input="inputValue"
                   @click="clickHandle"
                   @confirm="confirmHandle"
                   :disabled="disabled"
                   :value="value"
                   :focus="focus"
                   confirm-type="search"
                   @focus="focusHandle"
                   placeholder="搜索绘本" />
            <view class="close one one-close" @tap.stop="clearHandle" v-if="!!value"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "gw-search-input",
        props: {
            focus: {
                defalut: false,
                type: Boolean
            },
            disabled: {
                defalut: false,
                type: Boolean
            },
            placeholder: {
                defalut: '搜索绘本',
                type: String
            }
        },
        data(){
            return {
                value: '',
                isFocus: false
            }
        },
        methods: {
            inputValue(event){
                let {value} = event.detail
                this.value = value
            },
            clickHandle(){
                this.$emit('clickHandle')
            },
            focusHandle(){
                this.isFocus = true;
                this.$emit('searchFocus');
            },
            clearHandle(){
                this.value = '';
                this.$emit('confirmSearch', '')
                // this.isFocus = false;
            },
            confirmHandle(event){
                let {value} = event.detail
                this.$emit('confirmSearch', value)
            }
        }
    }
</script>

<style scoped lang="scss">
    .fixed-top{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 110rpx;
        background: #FFFFFF;
        z-index: 10;
    }
    .gw-search-input{
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        position: relative;
        .icon-btn{
            position: absolute;
            font-size: 28rpx;
            left: 286rpx;
            top: 50%;
            transform: translateY(-50%);
        }
        .uni-input{
            width: 690rpx;
            height: 68rpx;
            background:rgba(255,255,255,1);
            border:1px solid rgba(234,234,234,1);
            border-radius:40rpx;
            font-size:26rpx;
            color:rgba(153,153,153,1);
            text-align: center;
            padding-left: 58rpx;
            padding-right: 30rpx;
            box-sizing: border-box;
            &.is-focus{
                text-align: left;
            }
        }
        .close{
            position: absolute;
            right: 44rpx;
            left: auto;
            z-index: 10;
            top: 50%;
            transform: translateY(-50%);
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: #c0c0c0;
        }
    }
</style>